<template>
  <div class="wp-emp">
    <div class="wp-emp__header">
      <template v-if="sourceType=='employee'">
      <div>
      <span>{{(selectInfo.typeName||'')+':'+selectInfo.count}}</span>
      <el-tooltip :content="selectInfo.desc" placement="top">
         <i class="el-icon-question"></i>
      </el-tooltip>
      </div>
      <div>
        <el-dropdown trigger="click" @command="handleSelect">
      <el-button
                v-if="empSaveAuth"
                type="text"
                icon="el-icon-circle-plus"
                class="add-btn">添加</el-button>
                <el-dropdown-menu slot="dropdown" >
                   <el-dropdown-item command="createEmp" icon="el-icon-circle-plus-outline">
                    新建员工
                   </el-dropdown-item>
                </el-dropdown-menu>
        </el-dropdown>
      </div>
      </template>
      <template v-else-if="sourceType=='department'">
          <div>
            <span>{{ selectInfo.departmentName }}</span>
      <el-tooltip content="部门下任职的员工信息" placement="top">
         <i class="el-icon-question"></i>
      </el-tooltip>
          </div>
          <div style="padding-right: 15px;">
              <el-checkbox v-model="containChildrenDept" @change="handleDefautSearch">包含子部门</el-checkbox>
               <el-dropdown trigger="click" @command="handleSelect" placement="bottom-start">
                <el-button
                v-if="empSaveAuth"
                type="text"
                icon="el-icon-circle-plus"
                class="add-btn">添加</el-button>
                  <el-dropdown-menu slot="dropdown" >
                   <el-dropdown-item command="createEmp" icon="el-icon-circle-plus-outline">
                    新建员工
                   </el-dropdown-item>
                  </el-dropdown-menu>
               </el-dropdown>
                   <el-dropdown
                   trigger="click" @command="handleSelect" placement="bottom-start">
                     <el-button icon="el-icon-more-outline"></el-button>
                     <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="editDept" icon="el-icon-edit-outline">
                            编码部门
                          </el-dropdown-item>
                        <el-dropdown-item v-if="selectInfo.parentCode!=='0'" command="deleteDept" icon="el-icon-delete">
                            删除部门
                          </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
          </div>
      </template>
    </div>
    <div class="wp-emp__content">
      <page-table
        ref="product_entry"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
        <el-table-column label="姓名" prop="employeeName" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link type="primary" @click.native="showEmpPanel(scope.row.employeeCode)">
              {{scope.row.employeeName}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="账号(登录)" prop="loginAccount" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="手机号" prop="mobile" width="100"></el-table-column>
        <el-table-column label="性别" prop="gender" :formatter="formatterGender"></el-table-column>
        <el-table-column label="邮箱" prop="email" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column label="入职时间" prop="entryDate" width="100">
          <template slot-scope="scope">
                  {{scope.row.entryDate|FormatDate('yyyy-MM-dd')}}
          </template>
        </el-table-column>
          <el-table-column label="登录时间" prop="lastLoginTime" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="直属部门" prop="mainDepartmentName" show-overflow-tooltip></el-table-column>
        <el-table-column label="直属上级" prop="superiorName"></el-table-column>
        <el-table-column label="职位"  show-overflow-tooltip>
            <template slot-scope="scope">
                  {{ formatterPosition(scope.row.positionInfoList)}}
          </template>
        </el-table-column>
      </page-table>
    </div>
    <Employee-panel v-if="empVisible" :visible.sync="empVisible" :defaultDepartment="defaultDepartment" @afterSave="afterSaveEmp"></Employee-panel>
    <Department-panel  v-if="deptVisible" :data="selectInfo" :visible.sync="deptVisible" :title="deptTitle" @afterSave="afterSaveDept"></Department-panel>
    <Drawer ref="EmpDetailPanel" width="50%">
      <Employee-info :param="selectEmployeeCode" @afterUpdate="empAfterUpdate"/>
    </Drawer>
  </div>
</template>

<script>
import Drawer from '@/components/Drawer'
import PageTable from '@/components/PageTable'
import EmployeePanel from './create/EmployeePanel'
import DepartmentPanel from './create/DepartmentPanel'
import EmployeeInfo from './detail/EmployeeInfo'
import Mixins from '../mixins'

export default {
  inject: ['reload'],
  name: 'employee_dept',
  components: {Drawer, PageTable, EmployeePanel, DepartmentPanel, EmployeeInfo},
  mixins: [Mixins],
  props: ['initSelectInfo', 'initSourceType', 'keywordParam'],
  watch: {
    initSelectInfo: {
      handler (val) {
        this.selectInfo = val || {}
      },
      deep: true,
      immediate: true
    },
    initSourceType: {
      handler (val) {
        this.sourceType = val
      },
      immediate: true
    }
  },
  data () {
    return {
      id: 'employee_dept',
      containChildrenDept: true,
      empSaveAuth: true,
      selectInfo: {},
      sourceType: '',
      empVisible: false,
      deptVisible: false,
      deptTitle: '',
      searchParams: {},
      selectEmployeeCode: '',
      defaultDepartment: ''
    }
  },
  created () {
    this.handleDefautSearch(this.selectInfo, this.sourceType)
  },
  methods: {
    formatterGender (row, column, cellValue, index) {
      return cellValue === 0 ? '女' : '男'
    },
    handleSearch (param, sourceType) {
      if (sourceType === 'department') {
        this.selectInfo = {...param}
        if (!this.containChildrenDept) {
          this.searchParams = {departmentCodeList: [this.selectInfo.departmentCode]}
        } else {
          const departmentCodeList = this.getDepartmentCodes(this.selectInfo)
          this.searchParams = {departmentCodeList: departmentCodeList || []}
        }
        this.sourceType = sourceType
      } else if (sourceType === 'employee') {
        this.selectInfo = {...param}
        const type = this.selectInfo.type
        if (type === '2') {
          this.searchParams = {isNewEntry: true}
        } else if (type === '3') {
          this.searchParams = {isActive: true}
        } else if (type === '4') {
          this.searchParams = {isActive: false}
        } else if (type === '5') {
          this.searchParams = {status: 0}
        } else if (type === '6') {
          this.searchParams = {status: -1}
        } else {
          this.searchParams = {}
        }
        this.sourceType = sourceType
        this.containChildrenDept = true
      }
      if (this.keywordParam && Object.keys(this.keywordParam).length > 0) {
        this.searchParams = {...this.searchParams, ...this.keywordParam}
      }
      this.search(this.searchParams)
    },
    handleDefautSearch () {
      this.handleSearch(this.selectInfo, this.sourceType)
    },
    handleSelect (command) {
      if (command === 'editDept') {
        this.deptVisible = true
        this.deptTitle = '编辑部门'
      } else if (command === 'createEmp') {
        this.defaultDepartment = this.selectInfo.departmentCode || ''
        this.empVisible = true
      } else if (command === 'deleteDept') {
        if (!this.selectInfo.departmentCode) {
          this.$msgBox.error('部门编码不存在')
          return
        }
        this.$msgBox.confirm('确定删除部门', () => {
          this.requestOption('deleteDepartment', {departmentCode: this.selectInfo.departmentCode}, res => {
            this.$emit('refreshDept', res)
          })
        })
      }
    },
    getDepartmentCodes (dept, list) {
      if (dept) {
        list = list || []
        list.push(dept.departmentCode)
        const childrenList = dept.childrenList
        if (childrenList && childrenList.length > 0) {
          const codes = childrenList.map(v => {
            return this.getDepartmentCodes(v, list)
          })
          list.concat(codes)
        }
        return list
      }
    },
    afterSaveEmp (data) {
      this.handleDefautSearch(this.selectInfo, this.sourceType)
      this.$emit('refreshEmp', data)
    },
    afterSaveDept (data) {
      this.$emit('refreshDept', data)
    },
    showEmpPanel (employeeCode) {
      this.selectEmployeeCode = employeeCode
      this.$refs.EmpDetailPanel.show()
    },
    empAfterUpdate (data) {
      this.$refs.EmpDetailPanel.close()
      this.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-emp{
  &__header{
    font-size: 16px;
    border-bottom: 1px solid #e6e6e6;
    height: 50px;
    line-height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 15px;
  }
  &__content{
    overflow: auto;
    height: calc(100% - 50px);
    overflow-y: overlay;
    overflow-x: overlay;
  }
}
</style>
